<template>
  <div class="love_release_bonu">
    <c-title :hide="false" :text="'我的推广'"></c-title>
    <div class="headBg" :style="{ '--color': `${background_color}` }">
      <div class="title">数字资产管理</div>
      <div class="listbox">
        <div class="list" v-for="(item, index) in statsitic" :key="index">
          <div class="val">{{ item.val }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="contenBox">
      <div class="list" @click="toUrls('QrCode')">
        <div class="val">
          <i class="iconfont icon-yaoqinghaibao"></i>
        </div>
        <div class="name">邀请海报</div>
      </div>
      <div class="list" @click="toUrls('myRelationship')">
        <div class="val">
          <i class="iconfont icon-wodekehu"></i>
        </div>
        <div class="name">我的客户</div>
      </div>
      <div class="list" @click="toUrls('shopsLove')">
        <div class="val">
          <i class="iconfont icon-zhangmumingxi"></i>
        </div>
        <div class="name">账目明细</div>
      </div>
    </div>
    <div class="trbox" v-for="(item, index) in listarr" :key="index">
      <div class="title">{{ item.name }}</div>
      <div class="lisBox">
        <template v-if="item.top">
          <div class="lis">
            <div class="trval">{{ item.top }}</div>
            <div class="name">大区</div>
          </div>
          <div class="lis">
            <div class="trval">{{ item.others }}</div>
            <div class="name" v-if="item.others">小区</div>
          </div>
        </template>
        <template v-else>
          <div class="lis">
            <div class="trval">{{ item.val }}</div>
          </div>
          <div class="lis"></div>
        </template>
      </div>
    </div>
    <!--  海报部分  -->
    <yz-goodsposter v-model="posterShow" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>
    <!--  海报部分  end  -->
  </div>
</template>
<script>
import yzGoodsposter from "components/ui_components/yz_goodsPoster";

export default {
  data() {
    return {
      background_color: "#f15353",
      statsitic: [],
      listarr: [],
      // 海报
      posterShow: false,
      poster: "",
      poster_Data: {
        poster_data: null,
        background: {}
      },
      poster_id: null //海报id
    };
  },
  components: {
    yzGoodsposter
  },
  activated() {
    let info_basic = JSON.parse(localStorage.getItem("yz_basic_info"));
    this.background_color = info_basic.theme_color;
    this.getData();
  },
  methods: {
    toUrls(key) {
      if (key == "QrCode") {
        return this.openQrCode("block"); // 海报
      }
      this.$router.push(this.fun.getUrl(key, {}));
    },
    getData() {
      $http
        .get("plugin.love-release-bonus.frontend.controllers.center.index", {}, "生成中")
        .then(response => {
          if (response.result === 1) {
            this.listarr = response.data.list;
            this.statsitic = response.data.statsitic;
            console.log(response.data, this.listarr);
          } else {
            this.posterShow = false;
            this.$dialog.alert({
              message: response.msg
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    //  海报生成
    openQrCode(e) {
      this.getPoster(e);
    },
    openQrCode_old(e) {
      if (!this.poster) {
        if (!this.timer) {
          this.getPoster_oldApi(e);
          this.timer = setInterval(() => {
            this.getPoster_oldApi(e);
          }, 3000);
        }
      } else {
        clearInterval(this.timer);
        this.toastPoster.clear();
      }
    },
    getPoster(e) {
      if (!this.fun.isTextEmpty(this.poster_Data.poster_data) || !this.fun.isTextEmpty(this.poster)) {
        this.posterShow = true;
        return;
      }
      let that = this;
      $http.get("member.qrcode.get-poster", {}, {}).then(
        response => {
          if (response.result === 1) {
            this.isNewPosterPlugin = response.data.new || false;
            if (response.data.center_show == 0) {
              //0 返回的默认图片
              that.poster = response.data.image_url;
              that.posterShow = true;
            } else if (response.data.center_show == 1) {
              //前端生成
              that.poster_Data.background.src = response.data.background_url || response.data.background;
              that.poster_Data.background.type = "background";
              that.poster_Data.poster_data = response.data.style_data;
              that.poster_id = response.data.id;
              that.posterShow = true;
            } else if (response.data.center_show == 2) {
              //部分关注二维码不支持跨域，走老接口
              that.toastPoster = this.$toast({
                duration: -1, // 持续展示 toast
                message: "正在为您生成海报中"
              });
              that.openQrCode_old(e);
            }
          } else {
            this.$toast(response.msg);
          }
        },
        response => {
          this.clearPostetInterval();
        }
      );
    },
    getPoster_oldApi(e) {
      $http.get("member.poster").then(
        response => {
          if (response.result === 1) {
            this.poster = response.data.image_url;
            if (this.poster) this.clearPostetInterval();
          } else {
            this.$toast(response.msg);
            this.clearPostetInterval();
          }
        },
        response => {
          this.clearPostetInterval();
        }
      );
    },
    clearPostetInterval() {
      if (this.timer) {
        this.posterShow = true;
        clearInterval(this.timer);
        if (this.toastPoster) {
          this.toastPoster.clear();
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.love_release_bonu {
  background: #f5f5f5;
  min-height: 100vh;
}
.list {
  flex: 1;
  color: #ffffff;
  .val {
    font-size: 0.94rem;
  }
  .name {
    font-size: 0.75rem;
  }
}
.headBg {
  height: 9.88rem;
  background: linear-gradient(180deg, var(--color) 0%, #f5f5f5 100%);
  padding: 0 0.75rem;
  padding-top: 1.5rem;
  .title {
    font-size: 1rem;
    color: #ffffff;
    text-align: left;
    font-weight: 600;
    margin-bottom: 1.25rem;
  }
  .mb {
    margin-bottom: 1.28rem;
  }

  .listbox {
    display: flex;
    justify-content: space-between;
    .val {
      font-weight: 600;
    }
  }
}
.contenBox {
  background: #ffffff;
  padding: 1.06rem 0 1.09rem 0;
  box-sizing: border-box;
  margin: -2.5rem 0.75rem 0 0.75rem;
  border-radius: 0.5rem;
  display: flex;
  .val {
    text-align: center;
    color: #000;
    .iconfont {
      font-size: 28px;
    }
  }
  .name {
    color: #000;
    margin-top: 0.5rem;
  }
}
.mg_conten {
  margin-top: 0.63rem;
}
.flex-s {
  justify-content: flex-start;
}
.trbox {
  padding: 0.9rem 0.75rem;
  margin: 0.63rem 0.75rem;
  text-align: left;
  background: #ffffff;
  border-radius: 0.5rem;
  .title {
    font-size: 0.94rem;
    font-weight: 600;
  }
  .lisBox {
    display: flex;
    justify-content: flex-start;
    padding-top: 1.09rem;
    font-weight: 600;
    .lis {
      flex: 1;
      text-align: center;
    }
  }
}
</style>
